<template>
  <div class="i18n-example">
    <div class="language-switcher">
      <h2>{{ t('message.info') }}</h2>
      <p>Current Locale: {{ currentLang }}</p>
      <el-radio-group v-model="currentLang" @change="handleLanguageChange">
        <el-radio label="zh-CN">中文</el-radio>
        <el-radio label="en">English</el-radio>
      </el-radio-group>
    </div>

    <div class="components-demo">
      <!-- 自定义语言包示例 -->
      <el-divider>{{ t('custom.welcome') }}</el-divider>
      <p>{{ t('custom.hello') }} - {{ t('custom.goodbye') }}</p>
      
   
      <!-- 覆盖的按钮文字 -->
      <el-divider>{{ t('form.submit') }} - {{ t('form.reset') }}</el-divider>
      <el-button type="primary">{{ t('form.submit') }}</el-button>
      <el-button>{{ t('form.reset') }}</el-button>
      <EButton>   {{ t("custom.welcome") }}</EButton>
      
      <!-- 新增的业务模块 -->
      <el-divider>{{ t('business.user.profile') }}</el-divider>
      <p>{{ t('business.user.settings') }}</p>
      <p>{{ t('business.order.create') }} | {{ t('business.order.list') }}</p>

      <el-divider>{{ t('cropper.selectImage') }}</el-divider>
      <CropperAvatar 
        v-model:value="avatarUrl"
        :showBtn="true"
        :btnText="t('cropper.selectImage')"
        @change="handleAvatarChange"
      />

      <el-divider>{{ t('form.submit') }}</el-divider>
      <el-form :model="formData" label-width="120px">
        <el-form-item :label="t('form.required')">
          <el-input v-model="formData.name" :placeholder="t('search.placeholder')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">{{ t('form.submit') }}</el-button>
          <el-button>{{ t('form.reset') }}</el-button>
        </el-form-item>
      </el-form>

      <el-divider>{{ t('table.operations') }}</el-divider>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" :label="t('table.operations')" />
        <el-table-column :label="t('table.operations')">
          <template #default>
            <el-button type="primary" size="small">{{ t('table.edit') }}</el-button>
            <el-button type="danger" size="small">{{ t('table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="!tableData.length" class="empty-state">
        {{ t('table.noData') }}
      </div>

      <el-divider>{{ t('message.confirm') }}</el-divider>
      <el-button @click="showDialog = true">{{ t('dialog.confirm') }}</el-button>
      
      <el-dialog 
        v-model="showDialog" 
        :title="t('dialog.confirm')"
        width="30%"
      >
        <span>{{ t('message.deleteConfirm') }}</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showDialog = false">{{ t('dialog.cancel') }}</el-button>
            <el-button type="primary" @click="showDialog = false">
              {{ t('dialog.confirm') }}
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-divider>Custom Component</el-divider>
      <EButton>{{ t('form.submit') }}</EButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n, useLocale } from '@/index'
import type { LocaleType } from '@/index'
// Note: Import your components here
// import { CropperAvatar } from '@epms-micro/epms-element'
const prid=["xxx:sss:ss"]


const { t } = useI18n()
const { changeLocale,getLocaleMessages, getCurrentLocale } = useLocale()

const currentLang = ref<LocaleType>(getCurrentLocale())
const avatarUrl = ref('')
const showDialog = ref(false)
const formData = ref({
  name: ''
})

const tableData = ref([
  { name: 'Example 1' },
  { name: 'Example 2' }
])

// Watch for locale changes to update current language display
watch(() => getCurrentLocale(), (newLocale) => {
  currentLang.value = newLocale
})

const handleLanguageChange = async (lang: LocaleType) => {
  try {
    console.log('Changing language to:', lang)
    const messages = await import(`../locales/${lang}.ts`)
    await changeLocale(lang,messages.default)
    ElMessage.success(t('message.success'))
    console.log('Language changed successfully to:', getCurrentLocale())
  } catch (error) {
    console.error('Language change failed:', error)
    ElMessage.error(t('message.error'))
  }
}

const handleAvatarChange = ({ source, data, filename }: any) => {
  console.log('Avatar changed:', { source, data, filename })
  ElMessage.success(t('upload.uploadSuccess'))
}
</script>

<style scoped>
.i18n-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.language-switcher {
  margin-bottom: 30px;
  text-align: center;
}

.components-demo {
  space-y: 20px;
}

.empty-state {
  text-align: center;
  color: #999;
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}
</style> 